import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
    //定义状态,组件共享的属性可以放到这个state中
    //状态和视图是一一对应的,状态发生变更,视图也会发生变化
    // state核心要掌握的
    //1.视图层访问state的方式 $store.state.xxx
    //2.组件选项中 this.$store.state.xxx
    //3.辅助函数 mapState映射到组件的computed可以直接使用
    //4.这个面试题怎么回答
    state: {
        name: "李雷",
        msg: '无奋斗,不青春',
        cart: []
    },
    //就是在vuex中的计算属性
    getters: {
        //跟组件中的computed的写法基本是一摸一样的
        //这里的getters计算属性是可以接受参数的,接受state作为参数
        reverseMsg(state) {
            console.log(state)
            //非法修改 但是目的能达到
            // state.name = '一个朴实无华的王小二'
            return state.msg.split("").reverse().join("")
        }
    },
    //提交mutation是更改state的唯一方式
    //每个mutation都由一个事件类型(type)和一个事件处理函数(handler)组成的,第一个参数接受的是state
    //type:function(){}
    mutations: {
        //每个Mutation都是一个函数,一般会把键(key)名大写,便于区分和普通函数不一样
        //mutation中变更状态都必须是同步操作
        CHANGE_NAME(state, payload) {
            state.name = payload
        },

        //在mutations中发起异步请求是不符合规范的,流程不对,效果能实现
        SET_CART(state, payload) {
            //这是同步操作 符合规范
            state.cart = payload
        }

    },
    //action和mutation是差不多的 都是有一个类型对应一个处理函数
    //接收的参数有些变化,action里面的函数接收的参数 叫做context 是一个综合的对象 里面包含了state commit dispatch getters....
    actions: {
        //action中的类型专门用于操作异步
        //异步逻辑写到action中 然后通过mutation修改状态
        //这也是一个流程
        FETCH_CART(context, payload) {
            console.log(payload)
            console.log(context)
            fetch("http://chst.vip:8081/data/index.json")
                .then(body => body.json())
                .then(res => {
                    //提交mutation更改state

                    //mutation是更改state的唯一方式

                    context.commit("SET_CART", res.data)
                })

        }
    },
    modules: {}
})